이스트캠프 JavaScript 퀴즈 1

📘 오늘 학습한 내용

1️⃣ DOM

2️⃣ 이벤트

3️⃣ 비동기

4️⃣ Ajax

📝 퀴즈

🧩 퀴즈 1

Q. "비동기 프로그래밍"이란 무엇인가요? 왜 사용할까요?

📝 나의 답변:

다른 작업의 완료를 기다리기 전에 본인 작업을 먼저 수행하는 작업을 비동기 작업이라 한다.
여러 작업을 동시에 처리하기 위해서 사용한다.

✅ 정답:

여러 작업을 동시에 처리하기 위해서 사용한다.

🧩 퀴즈 2

Q. 아래 코드에서 출력되는 순서를 예상해보고, 그 이유를 설명하세요.

console.log("A");

setTimeout(() => {
  console.log("B");
}, 0);

console.log("C");

📝 나의 답변:

B
A
C

setTImeout은 비동기 함수이며, 딜레이 시간이 0초이기 때문에
A가 출력되는 결과를 기다리기 전에 먼저 B가 출력되는 작업을 수행한다.

✅ 정답:

A
C
B

코드의 함수 처리는 위에서부터 시작하기 때문에
비동기 함수의 시작도 A 출력 코드 이후에 B 출력 코드를 실행한다.
실행은 A -> B -> C 코드 순서대로다.
하지만 B 출력 코드는 비동기 처리를 위해 다른 위치에서 처리되기 때문에
A와 C는 같은 위치에서 진행되고 B는 다른 위치에서 처리된다.
그로 인해 B는 이동되는 데 시간이 걸리기 때문에 가장 늦게 처리된다.

🧩 퀴즈 3

Q. 버튼을 누르면 로딩 메시지를 보여주고, 3초 뒤에 이름 입력창이 나타나고, 이름을 입력하고 확인 버튼을 누르면 이름과 함께 인삿말을 출력하는 페이지를 만들어보세요.

📝 나의 답변:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Greetings!</title>
    <style>
        .hidden{
            display: none;
        }
    </style>
</head>
<body>
    <button id="btn-load">Click</button>
    <p id="load-msg" class="hidden">로딩중...</p>
    <input type="text" id="name" class="hidden">
    <button id="btn-confirm" class="hidden">확인</button>
    <p id="greet-msg" class="hidden"></p>

    <script>
        const btnLoad = document.getElementById("btn-load");
        const loadMsg = document.getElementById("load-msg");
        const nameInput = document.getElementById("name");
        const btnConfirm = document.getElementById("btn-confirm");
        const greetMsg = document.getElementById("greet-msg");
        
        btnLoad.addEventListener("click", ()=>{
            loadMsg.classList.toggle("hidden");

            if (nameInput.value) nameInput.value = "";
            if (!nameInput.classList.contains("hidden")) nameInput.classList.toggle("hidden");
            if (!btnConfirm.classList.contains("hidden")) btnConfirm.classList.toggle("hidden");
            if (!greetMsg.classList.contains("hidden")) {
                greetMsg.classList.toggle("hidden")
                nameInput.value = "";
            };

            const timer = setTimeout(()=>{
                loadMsg.classList.toggle("hidden");
                nameInput.classList.toggle("hidden");
                btnConfirm.classList.toggle("hidden");
            }, 3000);
        });
        
        btnConfirm.addEventListener("click", (e)=>{
            const name = nameInput.value;

            if(!name) {
                greetMsg.classList.toggle("hidden");
                greetMsg.textContent = "";
                return;
            }

            if (greetMsg.classList.contains("hidden")) greetMsg.classList.toggle("hidden");
            nameInput.value = "";
            greetMsg.textContent = `${name}님 환영합니다!`;
        })

    </script>
</body>
</html>